<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Capture - 回放页面</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      .container {
        padding: 20px;
        display: flex;
        gap: 20px;
        height: calc(100% - 60px); /* 减去上下 padding */
      }
      .controls {
        margin-bottom: 20px;
      }
      #snapshot-input {
        width: 100%;
        height: calc(100% - 120px); /* 减去标题和按钮的高度 */
        margin-bottom: 20px;
      }
      #replay-container {
        border: 1px solid #ccc;
        height: 100%;
        padding: 15px;
      }
      .input-area {
        width: 40%;
        height: 100%;
      }
      .replay-area {
        width: 60%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="input-area">
        <h1>DOM 回放演示</h1>
        <div class="controls">
          <button onclick="replay()">回放快照</button>
          <button onclick="clearContent()">清空</button>
        </div>
        <textarea id="snapshot-input" placeholder="请粘贴快照数据到这里"></textarea>
      </div>
      <div class="replay-area">
        <div id="replay-container"></div>
      </div>
    </div>

    <script src="../../dist/domrecord.umd.min.js"></script>
    <script>
      const visualizer = new domrecord.Visualizer();
      let currentFrame = null;

      async function replay() {
        try {
          const snapshotData = JSON.parse(document.getElementById('snapshot-input').value);

          clearFrame();

          const iframe = document.createElement('iframe');
          iframe.id = 'replayFrame';
          iframe.style.cssText = 'width: 100%; height: 100%; border: none;';
          document.getElementById('replay-container').appendChild(iframe);

          currentFrame = iframe;
          await visualizer.setup(iframe.contentWindow);
          visualizer.render(snapshotData);
        } catch (error) {
          alert('快照数据格式错误！');
          console.error(error);
        }
      }

      function clearContent() {
        document.getElementById('snapshot-input').value = '';
        clearFrame();
      }

      function clearFrame() {
        if (currentFrame) {
          currentFrame.remove();
          currentFrame = null;
        }
      }
    </script>
  </body>
</html>
